
<template>
  <div class="headerBox">
    <div class="header mainWidth">
      <div class="headerCon">
        <div class="headerLeft">
          <div class="logo">
            <img src="../../assets/images/youleLogo_x6.png" />
          </div>
          <router-link
            v-for="(item,index) in headerList"
            :key="index"
            :to="item.link"
          >{{item.title}}</router-link>
        </div>
        <div class="headerRight">
          <div class="inputBox">
            <input type="text"
              @input="searchInputFn()"
              @enter="searchSubmitFn()"
              v-model="searchValue"
              placeholder="搜索社区话题和内容"
              class="searchInput"
              maxlength="100"
            >
            <div class="searchIconbox" @click="searchSubmitFn()">
                <i class="el-icon-search"></i>
            </div>
          </div>
          <button class="loginBtn" @click="goLogin()">登录</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getTouchHeaderNav,getData }  from '@/api'
export default {
  name: "touchHeader",
  data() {
    return {
      headerList: [],
      searchValue:''
    };
  },
  created(){
    // getTouchHeaderNav()
    getData('/api/th').then(res=>{
      // console.log('header',res);
      this.headerList = res.data.data;
    })
  },
  methods: {
    goLogin() {
      this.$router.push("/login");
    },
    searchInputFn(){
      // console.log(1,this.searchValue);
    },
    searchSubmitFn(){
      console.log(11,this.searchValue);
      getData('/api/ta').then(res=>{
        console.log('header',res);
        this.headerList = res.data.data;
      })
    }
  }
};
</script>
<style lang="less" scoped>
.mainWidth{
  width:1240px;
  margin: 0 auto;
}
.headerBox {
  height: 60px;
  position: sticky;
  top: 0;    z-index: 10;
  -webkit-box-shadow: 0 0 10px 0 rgb(113 109 168 / 8%);
  box-shadow: 0 0 10px 0 rgb(113 109 168 / 8%);
  overflow: hidden;
  background: #fff;
  .header {
    margin: 0 auto;
    .headerCon{
      display: flex;
      justify-content: space-between;
      .headerLeft {
        display: flex;
        align-items: center;
        width: 500px;
        a {
          margin-left: 40px;
          padding: 10px 0;
          color: #12141a;
          font-size: 15px;
          &:hover {
            color: #12141a;
            font-weight: 600;
            border-bottom: 2px solid #00b8bf;
          }
        }
        .logo {
          float: left;
          display: flex;
          align-items: center;
          height: 60px;
          img {
            width: 70px;
            height: 32px;
          }
        }
      }
      .headerRight {
          display: flex;
          align-items: center;
        .inputBox{
          margin-right: 20px;
          position: relative;
          width: 300px;
          height:38px;
          line-height: 38px;
          border-radius: 20px;
            border: 1px solid #e3e7ed;
            &:hover{
              border-color: #2cd7c8;
            }
          .searchInput {
            position: absolute;
            left: 20px;
            padding: 0 38px 0 0;
            box-sizing: border-box;
            height: 38px;
            line-height: 38px;
            width: calc(100% - 38px);
            border:none;
            outline: none;
          }
          .searchIconbox{
            position: absolute;
            right:0;
            width: 40px;
            height: 40px;
            line-height: 40px;
            color: #e3e7ed;
            vertical-align: middle;
            i{
              font-size:26px;
            }
          }
        }
        .loginBtn {
          width: 60px;
          height: 36px;
          border-radius: 4px;
          font-size: 14px;
          color: #fff;
          outline: none;
          border: none;
          cursor: pointer;
          background: #00b8bf;
          &:hover{background: #03c5cc;}
        }
      }
    }
  }
}
</style>